<template>
  <div class="subject-item-top flex flex-align-center">
    <div class="practice" @click="dialogVisible = true">
      <div class="practice-content">
        <div class="practice-title">顺序练习</div>
        <div class="practice-count">
          {{ statisticsData.answeredQuestionCount || 0 }}/{{
            statisticsData.totalQuestionCount || 0
          }}
        </div>
        <div class="practice-action">开始练习</div>
      </div>
    </div>
    <div class="marL200 flex flex-column">
      <div class="title">
        <span>全量考题</span>
        <span class="marL20">考前刷题</span>
      </div>
      <div class="center font25 tips">科目一全新考试题库，考前必刷，先练后考试</div>
      <div class="grid">
        <div v-for="(item, index) in questionType" :key="index" class="flex flex-column flex-align-center hover"
          @click="toAfterClass(index)">
          <img :src="item.img" alt="" class="typePic" />
          <div class="marT15 font30">{{ item.name }}</div>
        </div>
      </div>
    </div>
  </div>
  <div class="subject-item-bottom flex">
    <div class="flex flex-column flex-justify-center">
      <div class="simulate" @click="toMnks">
        <div class="simulate-content">
          <div class="practice-title">模拟考试</div>
          <div class="practice-count">平均成绩：<span class="font25">{{ statisticsData.averageScore || 0 }}分</span></div>
          <div class="simulate-action">立即考试</div>
        </div>
      </div>
    </div>
    <div class="marL200 flex flex-column">
      <div class="title">
        <span>模拟考试</span>
        <span class="marL20">100%仿真</span>
      </div>
      <div class="center font25 tips">
        直击全真考题，模拟真实考试环境，高度还原真实考题难度
      </div>
      <div class="grid">
        <div v-for="(item, index) in simulationType" :key="index" class="flex flex-column flex-align-center hover"
          @click="toSimulate(index)">
          <img :src="item.img" alt="" class="typePic" />
          <div class="marT15 font30">{{ item.name }}</div>
        </div>
      </div>
    </div>
  </div>
  <el-dialog v-model="dialogVisible" :style="{ borderRadius: '10px', height: '950px', padding: '0' }"
    :show-close="false" :show-header="false" class="practice-dialog">
    <div class="practice-container flex">
      <div class="leftBox">
        <div class="dialogTitle">顺序练习</div>
        <div class="practiceInfo marT30">
          <div class="flex flex-justify-between flex-align-center">
            <div class="flex flex-align-center">
              <img :src="userStore.storeInfo.avatar" alt="" class="headerPic" />
              <div>
                <div class="marL20 phone">{{ userStore.storeInfo.memberName }}</div>
                <div class="marL20 phone marT20">{{ userStore.storeInfo.mobile }}</div>
              </div>
            </div>
            <div class="flex flex-column flex-align-center">
              <div>
                <span class="f45">{{ statisticsData.accuracyRate || 0 }}</span>
                <span class="f25">%</span>
              </div>
              <div class="f20 marT15">预测通过率</div>
            </div>
          </div>
          <div class="practiceTime marT30">上次练习时间：{{ statisticsData.lastPracticeTime }}</div>
        </div>
        <div class="doingPractice marT30">
          <div style="display: grid; grid-template-columns: repeat(4, 1fr)">
            <div class="flex flex-column flex-align-center">
              <div class="practiceNum">{{ statisticsData.totalQuestionCount - statisticsData.answeredQuestionCount
              }}</div>
              <div class="practiceTitle marT10">未做题</div>
            </div>
            <div class="flex flex-column flex-align-center">
              <div class="practiceNum">{{ statisticsData.wrongQuestionCount || 0 }}</div>
              <div class="practiceTitle marT10">错题</div>
            </div>
            <div class="flex flex-column flex-align-center">
              <div class="practiceNum">{{ statisticsData.collectedCount }}</div>
              <div class="practiceTitle marT10">收藏题</div>
            </div>
            <div class="flex flex-column flex-align-center">
              <div>
                <span class="practiceNum">{{ statisticsData.accuracyRate || 0 }}</span>
                <span class="unit">%</span>
              </div>
              <div class="practiceTitle marT10">正确率</div>
            </div>
          </div>
          <div class="flex flex-justify-center marT30">
            <div class="continue" @click="toOrder">继续练习</div>
          </div>
        </div>
        <div class="sj marT30"></div>
      </div>
      <div class="rightBox flex flex-column flex-align-center">
        <div class="downTitle">下载绿通驾考APP</div>
        <div class="gettips">获取手机版专享特权</div>
        <img src="@/assets/img/ewm1.png" alt="" class="ewmPic" />
        <div class="fh25 marT20">绿通驾考APP</div>
        <div class="unit marT5">支持平台：Android、iOS</div>
        <img src="@/assets/img/ewm2.png" alt="" class="ewmPic" />
        <div class="fh25">微信小程序</div>
        <div class="unit marT5">直接体验，无需下载</div>
      </div>
    </div>
  </el-dialog>
  <el-dialog v-model="learnModal" :style="{
    borderRadius: '10px',
    height: '1025px',
    padding: '60px 50px',
    border: '2px solid #d9d9d9',
  }" :show-header="false" :close-on-click-modal="false" class="learn-dialog" width="62%">
    <div class="learnTitle">学法减分</div>
    <div class="flex marT50 flex-justify-between">
      <div class="w60">
        <div class="flex flex-align-center">
          <div class="circle">问</div>
          <div class="marL10 learnRubric">什么是学法减分？</div>
        </div>
        <div class="flex marT40 flex-align-baseline">
          <div class="circle">答</div>
          <div class="marL10 learn-content">
            “学法减分”是指机动车驾驶人因交通违法行为被记
            分，参加交通安全学习并考试合格后，可申请减免违
            法记分。一次可减免1分，一个记分周期内累计最高减
            免6分。考试时间为20分钟，每题答题时间最长60秒。
            系统将随机从题库中抽取20题，题型为判断题、单项
            选择题、多项选择题。答对18道题及以上为合格，答
            错或者超时未答的题目数累计达3题的，系统自动判定
            考试不合格并退出考试。考试未通过的，可以在24小 时内申请补考，补考以2次为限。
          </div>
        </div>
      </div>
      <div class="w35">
        <div class="flex">
          <img src="@/assets/img/header.jpg" alt="" class="headerPic" />
          <div class="marL20">
            <div class="phone">185****2268</div>
            <div class="fc25 marT20">复习别偷懒，题要多练才能熟</div>
          </div>
        </div>
        <div class="marT40">
          <span class="learn_title">适用车型</span>
          <span class="marL30 fh28">A、B、C、D</span>
        </div>
        <div class="marT40">
          <span class="learn_title">考试标准</span>
          <span class="marL30 fh28">20题，20分钟</span>
        </div>
        <div class="marT40">
          <span class="learn_title">合格标准</span>
          <span class="marL30 fh28">答对18题及以上合格</span>
        </div>
        <div class="marT40">
          <span class="learn_title">出题规则</span>
          <span class="marL30 fh28">根据公安部规定出题规则组卷</span>
        </div>
        <div class="marT40 fc25 ts_heigth">
          温馨提示:考试模式不能修改答案，每错1题扣 5分，错题累计超过2道，考试不合格，系统自
          动提醒交卷。
        </div>
      </div>
    </div>
    <div class="flex flex-justify-center marT50">
      <div class="contact cursor_pointer">练习真题</div>
      <div class="simulated cursor_pointer">模拟考试</div>
    </div>
  </el-dialog>
  <el-dialog v-model="simulateModal" :style="{ borderRadius: '10px', height: '950px', padding: '0' }"
    :show-close="false" :show-header="false" class="practice-dialog" width="61%">
    <div class="practice-container flex">
      <div class="identity">
        <div class="dialogTitle">考生身份确认</div>
        <div class="flex marT50 marL40">
          <div class="examGuide">
            <div class="examTitle">
              考生须知
            </div>
            <div v-for="(item, index) in guideList" :key="index" class="guideItem">
              {{ item.content }}
            </div>
          </div>
          <div class="marL40">
            <div class="flex flex-align-center">
              <img :src="userStore.storeInfo.avatar" alt="" class="headerPic" />
              <div class="marL20">
                <div class="phone">{{ userStore.storeInfo.mobile }}</div>
                <div class="marT20 fc25">复习别偷懒，题要多练才能熟</div>
              </div>
            </div>
            <div class="marT30">
              <span class="learn_title">考试科目</span>
              <span class="marL30 fh28">科目四</span>
            </div>
            <div class="marT30">
              <span class="learn_title">准驾车型</span>
              <span class="marL30 fh28">小车C1/C2/C3</span>
            </div>
            <div class="marT30">
              <span class="learn_title">考试标准</span>
              <span class="marL30 fh28">50题，45分钟</span>
            </div>
            <div class="marT30">
              <span class="learn_title">合格标准</span>
              <span class="marL30 fh28">90分及格（满分100分）</span>
            </div>
            <div class="marT30">
              <span class="learn_title">出题规则</span>
              <span class="marL30 fh28">根据公安部规定出题规则组卷</span>
            </div>
            <div class="warmTips marT30">
              温馨提示:模拟考试下不能修改答案，每做错1
              题扣2分，合格标准为90分。
            </div>
          </div>
        </div>
        <div class="flex flex-justify-center marT30">
          <div class="continue" @click="toExam">开始考试</div>
        </div>
      </div>
      <div class="rightBox flex flex-column flex-align-center">
        <div class="downTitle">下载绿通驾考APP</div>
        <div class="gettips">获取手机版专享特权</div>
        <img src="@/assets/img/ewm1.png" alt="" class="ewmPic" />
        <div class="fh25 marT20">绿通驾考APP</div>
        <div class="unit marT5">支持平台：Android、iOS</div>
        <img src="@/assets/img/ewm2.png" alt="" class="ewmPic" />
        <div class="fh25">微信小程序</div>
        <div class="unit marT5">直接体验，无需下载</div>
      </div>
    </div>

  </el-dialog>
</template>
<script lang="ts" setup>
import '../home.scss'
import { reactive, ref, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import sxlx from '@/assets/img/sxlx.png'
import ljks from '@/assets/img/ljks.png'
import sc from '@/assets/img/sc.png'
import mkpjf from '@/assets/img/mkpjf.png'
import lxjd from '@/assets/img/lxjd.png'
import { getStoreInfo, getProgressToCarMode } from '@/api/userApi'
import { useUserStore } from '@/store/user'

const dialogVisible = ref(false)
const userStore = useUserStore()
const router = useRouter()
const simulateModal = ref(false)
const learnModal = ref(false)

const questionType = reactive([
  {
    img: sxlx,
    name: 'VIP课程',
  },
  {
    img: ljks,
    name: '新规试题',
  },
  {
    img: sc,
    name: '错题收藏',
  },
  {
    img: mkpjf,
    name: '专项练习',
  },
  {
    img: lxjd,
    name: '知识点',
  },
])
const simulationType = reactive([
  {
    img: sxlx,
    name: '直播课堂',
  },
  {
    img: ljks,
    name: '考前密卷',
  },
  {
    img: sc,
    name: '成绩排行',
  },
  {
    img: mkpjf,
    name: '图标技巧',
  },
  {
    img: lxjd,
    name: '学法减分',
  },
])
const guideList = reactive([
  {
    content: '1.遵守考场纪律，服从监考员指挥。'
  },
  {
    content: '2.进入考场，手机关机，禁止抽烟和吃零食。'
  },
  {
    content: '3.未经工作人员允许，考试禁止随意出入考场。'
  },
  {
    content: '4.考场内禁止大声喧哗，禁止随意走动。'
  },
  {
    content: '5.考试中认真答题，不准交头接耳。'
  },
  {
    content: '6.考试中不准冒名顶替，不准弄虚作假。'
  },
  {
    content: '7.注意考场卫生，禁止随地吐痰，禁止乱扔纸屑。'
  },
  {
    content: '8.爱护公物及考试设备。'
  }
])

const toAfterClass = (i: number) => {
  const routes = [
    'after_class',
    'subject_four',
    'wrong_question_collection',
    'specialExercises',
    'knowledge',
  ]
  const routeName = routes[i]
  if (routeName) {
    router.push({ name: routeName })
  } else {
    console.warn('Invalid index:', i)
  }
}

const toMnks = () => {
  simulateModal.value = true
  // router.push({
  //   name: 'mnks',
  // })
}

const toOrder = () => {
  router.push({
    name: 'order',
  })
}

const toSimulate = (i: number) => {
  if (i == 2) {
    router.push({ name: 'score_ranking' })
  } else if (i == 3) {
    router.push({ name: 'icon_trick' })
  } else if (i == 4) {
    learnModal.value = true
  }
}

const statisticsData = ref<any>({})
const getQuestionData = async () => {
  try {
    const res = await getProgressToCarMode({
      id: userStore.storeInfo.memberId,
      carModelId: userStore.storeInfo.carModelId,
      categoryId: 1
    })
    if (res.code === '00000') {
      statisticsData.value = res.data.find((e: any) => e.categoryId === 1)
    }
  } catch { } finally { }
}

watch(
  () => userStore.storeInfo.memberId,
  (newVal) => {
    if (newVal) {
      getQuestionData()
    }
  },
  { immediate: true }
)

const toExam = () => {
  router.push({
    name: 'mnExam'
  })
}

// onMounted(() => {
//   getQuestionData()
// })
</script>
<style lang="scss" scoped>
.subject-item-top {
  border-bottom: 1px solid #eeeeee;
}

.subject-item-bottom {
  background-color: #fff;
}

.subject-item-top,
.subject-item-bottom {
  padding: 0 100px;
  min-height: calc((100vh - 92px - 90px) / 2);
  // flex: 1;
}

.practice,
.simulate {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
  // box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  border: 24px solid #ecf7ff;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-10px);
    /* 上移10像素 */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    /* 悬停时更明显的阴影 */
    cursor: pointer;
  }
}

.practice {
  background: linear-gradient(to bottom, #59b8ff, #189bff);
  border: 24px solid #ecf7ff;
}

.simulate {
  background: linear-gradient(to bottom, #61f141, #41cf1f);
  border: 24px solid #eefbf0;
}

.practice-title {
  font-size: 40px;
  font-weight: bold;
}

.practice-count {
  font-size: 20px;
  opacity: 0.9;
  margin: 20px 0;
}

.practice-action,
.simulate-action {
  font-size: 25px;
  font-weight: 500;
  padding: 8px 30px;
  border-radius: 20px;
  margin-top: 8px;
  display: inline-block;
  backdrop-filter: blur(5px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.practice-action {
  color: #46a1e6;
  background: linear-gradient(to bottom, #f2f9ff, #f2f9ffab);
}

.simulate-action {
  color: #33ce6e;
  background: linear-gradient(to bottom, #f2f9ff, #f2f9ffab);
}

.typePic {
  width: 120px;
  height: 120px;
}

.marL200 {
  margin-left: 200px;
  min-width: calc(100% - 400px - 200px);
  min-height: calc((100vh - 92px - 90px) / 2);
  padding-top: 50px;
}

.hover {
  transition: all 0.3s ease;
  border-radius: 14px;
  padding: 20px;

  &:hover {
    transform: translateY(-10px);
    /* 上移10像素 */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    /* 悬停时更明显的阴影 */
    cursor: pointer;
  }
}

.title {
  font-size: 50px;
  text-align: center;
}

.knowledge {
  background: #edfff5;
  border-radius: 8px;
  padding: 20px 40px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  width: 80%;
}

.font30 {
  font-size: 30px;
}

.font25 {
  font-size: 25px;
}

.typePic1 {
  width: 80px;
  height: 80px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 50px;
}

.tips {
  color: #bababa;
  margin-top: 20px;
}

.practice-container {
  height: 950px;
}

.leftBox {
  width: 70%;
  height: 100%;
  background: linear-gradient(to bottom, #e1f7e7, #fff);
  padding: 40px 30px 30px;
  border-radius: 10px 0 0 10px;
}

.identity {
  width: 70%;
  height: 100%;
  padding: 40px 0 40px 30px;
  border-radius: 10px 0 0 10px;
}

.rightBox {
  width: 30%;
  height: 100%;
}

.dialogTitle {
  font-size: 45px;
  color: #333333;
  font-weight: bold;
  margin-left: 15px;
}

.practiceInfo {
  padding: 40px 30px 20px;
  border-radius: 14px;
  background-color: #fff;
}

.headerPic {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.phone {
  font-size: 30px;
  color: #333333;
  font-weight: bold;
}

.f20 {
  font-size: 20px;
  color: #a2a2a2;
}

.f45 {
  font-size: 45px;
  color: #ff595b;
  font-weight: bold;
}

.f25 {
  color: #ff595b;
  font-size: 25px;
}

.practiceTime {
  border-radius: 12px;
  padding: 0 30px 0 20px;
  border: 2px solid #ffe3b4;
  font-size: 25px;
  color: #333333;
  height: 90px;
  line-height: 90px;
}

.doingPractice {
  background-color: #fff;
  padding: 40px 70px;
  border-radius: 14px;
}

.practiceNum {
  color: #333333;
  font-size: 35px;
  font-weight: 500;
}

.practiceTitle {
  color: #a2a2a2;
  font-size: 28px;
}

.continue {
  background-color: #32c45d;
  font-size: 40px;
  width: 430px;
  height: 100px;
  color: #fff;
  line-height: 100px;
  text-align: center;
  border-radius: 50px;
  cursor: pointer;
}

.unit {
  font-size: 20px;
  color: #a2a2a2;
}

.sj {
  height: 130px;
  width: 100%;
  background: url('@/assets/img/sj.png') no-repeat;
  background-position: center;
  background-size: cover;
}

.downTitle {
  margin-top: 100px;
  font-size: 35px;
  color: #99660b;
  font-weight: 700;
}

.gettips {
  font-size: 25px;
  color: #d19933;
  margin-top: 20px;
}

.ewmPic {
  width: 180px;
  height: 180px;
  text-align: center;
  margin-top: 70px;
}

.fh25 {
  font-size: 25px;
  color: #333333;
}

.learnTitle {
  font-size: 50px;
  font-weight: bold;
  color: #333;
}

.circle {
  width: 40px;
  height: 40px;
  background-color: #32c45d;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  font-size: 25px;
  color: #fff;
}

.learnRubric {
  font-size: 35px;
  color: #4a4a4a;
}

.w60 {
  width: 60%;
}

.learn-content {
  font-size: 30px;
  color: #4a4a4a;
  width: calc(100% - 40px - 10px);
  line-height: 60px;
}

.w35 {
  width: 35%;
}

.fc25 {
  color: #a9a9a9;
  font-size: 25px;
}

.learn_title {
  font-size: 30px;
  color: #999;
}

.fh28 {
  color: #333;
  font-size: 28px;
}

.ts_heigth {
  line-height: 35px;
}

.contact,
.simulated {
  height: 100px;
  width: 400px;
  text-align: center;
  line-height: 100px;
  border-radius: 50px;
  color: #fff;
  font-size: 40px;
}

.contact {
  background-color: #0995ff;
}

.simulated {
  background-color: #32c45d;
  margin-left: 60px;
}

.examGuide {
  background-color: #f4fcf7;
  border-radius: 9px;
  padding: 30px 20px;

  .examTitle {
    font-weight: 400;
    font-size: 25px;
  }

  .guideItem {
    font-size: 20px;
    font-weight: 400;
    margin-top: 20px;
  }
}

.warmTips {
  color: #999;
  font-size: 25px;
}
</style>
